<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 1.抓取div */
			div{
				width: 300px;
				height: 300px;
				/* 效果：背景色 */
				background-color: #e4393c;
				/* 外边距属性：推 */
				margin-left:10px;
				margin-top:10px;
				/* 实现居中 上下右左 auto只能给右左，自动测算 */
				margin: 300px auto;
				/* 旋转· 转换属性旋转属性值 */
				transform: rotate(135deg);
				/* 美化操作：光晕 滤镜，下阴影 */
				filter: drop-shadow(0 0 30px #e4393c);
				/* 启动动画 ： 关键帧名称 过渡时间  流畅度 无限次*/
				animation: heart .8s linear infinite;
				
			}
			/* 伪类选择器：追加效果
			 ：after 语法：任意选择器  配合属性：content：“内容”
			 功能：追加一个效果：在元素之后生成一段文字内容
			 */
			 div:after{
				 content: "";
				 /* html中有很多元素 种类
				 文本内容--> 行内元素：特点，不可设置宽高，在一行内显示
				             块元素：      可设置宽高，独占一行（行内元素转换为块元素——display属性：行转块）
							 */
				display: block;
				 width:300px;
				 height: 300px;
				 background-color:#e4393c;
				 /* 倒角*/
				 border-radius: 50%;
				 /* 定位 微调 */
				 position: relative;
				 left: -150px;
				 top: -300px;
			 }
			 div:before{
			 	content: "";
			 	display: block;
			 	width:300px;
			 	height: 300px;
			 	background-color: #e4393c;
			 	border-radius: 50%;
			 	position: relative;
			 	top: 150px;
			 }
			 
			 /* 关键帧属性 功能 手翻书功能*/
			 @keyframes heart{
				 0%{
					 /* 缩放 转换属性 1表示等比例，>1放大；<1缩小*/
					 transform: rotate(13500deg) scale(1);
				 }
				 30%{
					 transform: rotate(135deg) scale(.7);
				 }
				 100%{
					 transform: rotate(13500deg) scale(1.3);
				 }
			 }
			 
		</style>
	</head>
	<body>
		<!-- 心  html:div-->
		<div></div>
		<audio src="img/renxi.mp3" autoplay></audio>
	</body>
</html>